<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="BootStrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="layui-v2.5.7/layui/css/layui.css"/>
    <script src="layui-v2.5.7/layui/layui.js"></script>
    <script src="javascript/jquery.js"></script>
    <script src="BootStrap/js/bootstrap.min.js"></script>
    <style>
        .layui-table tbody tr:hover {
            background-color: white;
        }
    </style>
</head>
<body>
<!--
    @Author: LuXi
    订单详情页
 -->
<section class="page-hd">
    <header>
        <h3 class="title"><font color="#d3d3d3">
            <button type="button" onclick="turnBack()" class=" layui-btn layui-btn-primary layui-btn-sm" ><i class=" layui-icon layui-icon-left" style="font-size: 20px;font-weight: bold"></i></button>
            订单管理</font>/<font>订单</font>/<font>订单详情</font></h3>
    </header>
</section>

<hr/>

<table class="layui-table" lay-skin="nob">
    <caption>
        <i class="layui-icon layui-icon-file-b" style="color: deepskyblue" ></i>
        订单信息
    </caption>
    <tr>
        <td>订单号:
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span id="userordernum"></span>
        </td>
        <td>订单状态:
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span id="userorderstatus1"></span>
        </td>
        <td>租用时长:
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span id="userorderleasetime"></span>
        </td>
    </tr>
    <tr>
        <td>下单时间:
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span id="userorderstarttime1"></span>
        </td>
        <td>归还时间:
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span id="userorderendtime"></span>
        </td>
        <td>是否异常:
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span id="userordersettlementstatus"></span>
        </td>
    </tr>
    <tr>
        <th colspan="3">异常类型:
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span id="userorderabnormal"></span>
        </th>
    </tr>
</table>

<hr/>

<table class="layui-table" lay-skin="nob">
    <caption>
        <i class="layui-icon layui-icon-file-b" style="color: deepskyblue" ></i>
        床位信息
    </caption>
    <tr>
        <th>所属医院:
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span id="hospitalinfoname"></span>
        </th>
        <th>所属科室:
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span id="departmentname"></span>
        </th>
        <th>床位编号:
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span id="bedmessageid"></span>
        </th>
    </tr>
    <tr>
        <th>设备ID:
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span id="bedtypecode"></span>
        </th>
        <th colspan="2">租金金额:
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span id="bedtypeprice"></span>
        </th>
    </tr>
</table>

<hr/>

<table class="layui-table" lay-skin="nob">
    <caption>
        <i class="layui-icon layui-icon-file-b" style="color: deepskyblue" ></i>
        用户信息
    </caption>
    <tr>
        <th>手机号:
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span id="userphone"></span>
        </th>
        <th>用户昵称:
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span id="username"></span>
        </th>
    </tr>
</table>

<hr/>

<table class="layui-table" lay-skin="nob">
    <caption>
        <i class="layui-icon layui-icon-file-b" style="color: deepskyblue" ></i>
        支付信息
    </caption>
    <tr>
        <th>实际支付:
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span id="userorderrent"></span>
        </th>
        <th>支付状态:
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span id="userorderstatus2"></span>
        </th>
        <th>支付时间:
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span id="userorderstarttime2"></span>
        </th>
    </tr>
</table>

<hr>

<div class="layui-container" style="text-align: center;" >
    <div class="row" >
        <a href="javascript:location.href='OrderTable.html'" class="layui-btn layui-btn-primary">返回</a>
    </div>
</div>

<script>
    layui.use("form",function () {
        var form = layui.form;
    });

    var userorderid = window.localStorage.getItem("userorderid");
    show();
    function show() {
        $.ajax({
            url:"/order/XiangQing",
            type:"post",
            data:{"userorderid":userorderid},
            success:function (data) {
                if(data.result){
                    //订单号
                    $("#userordernum").text(data.map.order.userordernum);
                    //订单状态
                    var status = "";
                    switch (data.map.order.userorderstatus) {
                        case 1:
                            status = "待支付";
                            break;
                        case 2:
                            status = "已支付";
                            break;
                        case 3:
                            status = "进行中";
                            break;
                        case 4:
                            status = "已完成";
                            break;
                    }
                    $("#userorderstatus1").text(status);
                    //租用时长
                    $("#userorderleasetime").text(data.map.order.userorderleasetime);
                    //下单时间
                    $("#userorderstarttime1").text(data.map.order.userorderstarttime);
                    //归还时间
                    $("#userorderendtime").text(data.map.order.userorderendtime);
                    //是否异常
                    switch (data.map.order.userordersettlementstatus){
                        case "1":
                            $("#userordersettlementstatus").text("正常");
                            //异常类型
                            $("#userorderabnormal").text("无");
                            break;
                        case "2":
                            $("#userordersettlementstatus").text("异常");
                            //异常类型
                            $("#userorderabnormal").text(data.map.order.userorderabnormal);
                            break;
                    }
                    //所属医院
                    $("#hospitalinfoname").text(data.map.hospital.hospitalinfoname);
                    //所属科室
                    $("#departmentname").text(data.map.department.departmentname);
                    //床位编号
                    $("#bedmessageid").text("CW0000"+data.map.bed.bedmessageid);
                    //设备ID
                    $("#bedtypecode").text("SB00"+data.map.bedType.bedtypecode);
                    //租金金额
                    $("#bedtypeprice").text("￥"+data.map.bedType.bedtypeprice);
                    //手机号
                    $("#userphone").text(data.map.user.userphone);
                    //昵称
                    $("#username").text(data.map.user.username);
                    //实际支付
                    $("#userorderrent").text("￥"+data.map.order.userorderrent+"元");
                    //支付状态
                    switch (data.map.order.userorderstatus) {
                        case 1:
                            $("#userorderstatus2").text("待支付");
                            break;
                        case 2:
                            $("#userorderstatus2").text("支付成功");
                            break;
                        case 3:
                            $("#userorderstatus2").text("进行中");
                            break;
                        case 4:
                            $("#userorderstatus2").text("支付成功");
                            break;
                    }
                    //支付时间
                    $("#userorderstarttime2").text(data.map.order.userorderstarttime);
                }else{
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('Error... ！', {icon: 5});
                    });
                }
            }
        });
    }
    //返回
    function turnBack() {
        location.href="OrderTable.html";
    }
</script>
</body>
</html>